import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native'
import actions from "../../../redux/action";
import {connect} from "react-redux";

class CourseScheduleComponent extends Component {
  componentDidMount() {
    const {fetchCourseSchedules} = this.props;
    let formData = '';
    let params = {
      studentId: '121',
      date: '2019-01-27',
    };
    for (let i in params){
      formData += encodeURIComponent(i) + '=' + encodeURIComponent(params[i]) + '&'
    }
    console.log(formData)
    fetchCourseSchedules(formData)
  }
  courseSchedule(data){
    let courseSchedules = [];
    if(data){
      courseSchedules = data;
      courseSchedules.forEach((item, index) => {
        let date = item.date.split(" ")[0];
        let _date = date.split('-');
        item.dateText = `${_date[0]}年${_date[1]}月${_date[2]}日`;
      })
    }
    console.log(courseSchedules)
    let courseSchedule = <View>
      <View style={MinaStyle.minaTitle}>
        <Text style={MinaStyle.minaTitleLeft}>课程表</Text>
        <View>
          <Text style={MinaStyle.minaTitleRightText}>9月10日</Text>
        </View>
      </View>
      <ScrollView
        style={styles.scrollViewStyle}
        horizontal={true} // 横向
        showsHorizontalScrollIndicator={false}  // 此属性为true的时候，显示一个水平方向的滚动条。
        >
        <View style={styles.courseSchedule}>
          {courseSchedules.map((item, index) => {
            return (
              <View style={styles.courseScheduleItem} key={index}>
                <Text style={styles.courseScheduleTitle}>{item.subjectName}</Text>
                <Text style={styles.courseScheduleTime}>{`${item.dateText} ${item.day} ${item.startHM}-${item.endHM} ${item.roomName}`}</Text>
                <View style={styles.courseScheduleTeacher}>
                  <Image
                    style={styles.courseScheduleTeaImg}
                    source={{uri: `http://${item.headImg}`}}
                  />
                  <Text style={styles.courseScheduleTeaName}>{item.teacherName}</Text>
                </View>
              </View>
            )
          })}
        </View>
      </ScrollView>
    </View>
    return courseSchedule;
  }
  render() {
    const {courseSchedule} = this.props;
    console.log(courseSchedule)
    return (
      this.courseSchedule(courseSchedule)
    )
  }
}

const mapStateToProps = state => ({
  courseSchedule: state.course.courseSchedule
});
const mapDispatchToProps = dispatch => ({
  fetchCourseSchedules: (params) => dispatch(actions.fetchCourseSchedules(params))
});
export default connect(mapStateToProps, mapDispatchToProps)(CourseScheduleComponent);

const styles = StyleSheet.create({
  courseSchedule: {
    flexDirection: 'row',  
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  courseScheduleItem: {
    paddingTop: 16,
    paddingRight: 12,
    paddingBottom: 16,
    paddingLeft: 12,
    borderRadius: 8,
    marginRight: 10,
    backgroundColor: '#fff',
    shadowOffset: {width: 7, height: 7},
    shadowColor: '#FFF3F4',
    shadowOpacity: 0.5,
    shadowRadius: 3,
    elevation: 7
  },
  courseScheduleTitle: {
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    color: '#282828',
  },
  courseScheduleTime: {
    fontSize: 12,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    color: '#9C9C9C',
    marginTop: 6,
  },
  courseScheduleTeacher: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  courseScheduleTeaImg: {
    width: 30,
    height: 30,
    borderRadius: 15,
  },
  courseScheduleTeaName: {
    color: '#282828',
    fontSize: 12,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    marginLeft: 8,
  },
})